import {
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Animated,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import VideoMenu from '../../component/video/videoMenu'
import { observer } from 'mobx-react-lite'
import { useStore } from '../../store'
import { common } from '../../assets/style/common'
import VideoFocus from '../../component/video/videoFocus'
import { useCardAnimation } from '@react-navigation/stack'
import { useEffect } from 'react'
interface comment {
  id: number
  authorId: string
  desc: string
  author: string
  address: string
  date: string
  likeStatus: string
  cover: string
}

const VideoCommentList = observer(function ({ navigation }: any) {
  const { videoSwiperStore, variableStore } = useStore()
  const videoInfo = videoSwiperStore.currentVideo
  const { current } = useCardAnimation()

  const cardHeight = variableStore.screen.height * 0.61
  useEffect(() => {
    return () => {
      videoSwiperStore.setShowCommentPage(false)
    }
  }, [])
  function back() {
    videoSwiperStore.setShowCommentPage(false)
    navigation.goBack()
  }
  return (
    <View style={[style.container]}>
      <Pressable style={style.cover} onPress={back} />
      <Animated.View
        style={[
          style.containerWrap,
          { height: cardHeight },
          {
            transform: [
              {
                translateY: current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [cardHeight, 0],
                  extrapolate: 'clamp',
                }),
              },
            ],
          },
        ]}
      >
        <View style={style.bar} />
        <View style={[style.header, common.flexCol]}>
          <Image style={style.authorCover} source={videoInfo?.authorCover} />
          <Text style={style.author}>{videoInfo?.author}</Text>
          <VideoFocus />
        </View>
        <ScrollView style={style.commentScrollView} bounces={false}>
          <View>
            <Text style={style.title}>{videoInfo?.title}</Text>
            <Text style={style.desc}>{videoInfo?.description}</Text>
            <View style={[common.flexCol, style.signWrap]}>
              <Text style={style.sign}>#话题1</Text>
              <Text style={style.sign}>
                #话题2qweqweqweqweqweqweqweqweqweqw
              </Text>
              <Text style={style.sign}>#话题2323qeqasdqwqweqweqwe</Text>
            </View>
            <View style={[style.tip, common.flexCol]}>
              <Text style={style.date}>2月1日 广东省</Text>
              <Pressable style={style.likeBtn}>
                <Text style={style.like}>不喜欢</Text>
              </Pressable>
            </View>
          </View>
          <CommentList />
        </ScrollView>
        <SafeAreaView style={style.bottom}>
          <VideoMenu theme={'black'} />
        </SafeAreaView>
      </Animated.View>
    </View>
  )
})
function CommentList() {
  const comment: comment[] = [
    {
      id: 1,
      authorId: '12343',
      desc: 'asadadadadadadssdadasadadadadadadssdadasadadadadadadssdadasadadadadadadssdad',
      author: '瘦瘦火锅',
      address: '山东',
      date: '2.18',
      likeStatus: 'like',
      cover: '',
    },
    {
      id: 2,
      authorId: '12343',
      desc: 'asadadadadadadssdad',
      author: '噼里啪啦',
      address: '山东',
      date: '2.18',
      likeStatus: 'like',
      cover: '',
    },
    {
      id: 3,
      authorId: '12343',
      desc: 'asadadadadadadssdad',
      author: '噼里啪啦',
      address: '山东',
      date: '2.18',
      likeStatus: 'like',
      cover: '',
    },
    {
      id: 4,
      authorId: '12343',
      desc: 'asadadadadadadssdad',
      author: '噼里啪啦',
      address: '山东',
      date: '2.18',
      likeStatus: 'like',
      cover: '',
    },
  ]
  return (
    <View style={style.commentWrap}>
      <Text style={style.commentTitle}>{comment?.length}条评论</Text>
      {comment.map(item => (
        <CommentItem key={item.id} {...item} />
      ))}
      <View style={cStyle.endTxtBox}>
        <View style={cStyle.endTxtWrap}>
          <Text style={cStyle.endTxt}>THE END</Text>
        </View>
        <View style={cStyle.endLine} />
      </View>
    </View>
  )
}
function CommentItem(props: comment) {
  return (
    <View style={[common.flexCol, cStyle.commentItem]}>
      <View style={cStyle.avatar} />
      <View style={cStyle.right}>
        <Text style={cStyle.author}>{props.author}</Text>
        <Text style={cStyle.desc}>{props.desc}</Text>
        <View style={[common.flexCol]}>
          <Text style={cStyle.info}>
            {props.date}·{props.address}
          </Text>
          <Text style={cStyle.responed}>回复</Text>
          <View style={[common.flexCol]}>
            <Text style={cStyle.likeTxt}>赞</Text>
            <Text style={cStyle.like}>&#x1018e;</Text>
          </View>
          <Pressable>
            <Text style={[cStyle.like, cStyle.rotate]}>&#x1018e;</Text>
          </Pressable>
        </View>
      </View>
    </View>
  )
}
export default VideoCommentList
const style = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'transparent',
    display: 'flex',
    flexDirection: 'column',
  },
  cover: {
    flex: 1,
    width: '100%',
  },
  containerWrap: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    width: '100%',
    zIndex: 10,
  },
  containerBox: {
    width: '100%',
    height: '100%',
    bottom: 0,
  },
  commentScrollView: {
    width: '100%',
    paddingHorizontal: 12,
  },
  pressContainer: {
    flexDirection: 'row',
    height: '100%',
  },
  header: {
    height: 68,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingHorizontal: 24,
  },
  bottom: {
    width: '100%',
  },
  bar: {
    height: 4,
    width: 54,
    borderRadius: 4,
    marginTop: 8,
    backgroundColor: '#ccc',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  authorCover: {
    width: 38,
    height: 38,
    borderRadius: 19,
  },
  author: {
    color: '#333',
    fontSize: 16,
    marginRight: 'auto',
    marginLeft: 12,
  },
  title: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold',
    paddingVertical: 12,
  },
  desc: {
    color: '#333',
    fontSize: 16,
    lineHeight: 20,
    marginBottom: 8,
  },
  tip: {
    paddingVertical: 12,
  },
  likeBtn: {
    borderColor: '#bbb',
    marginLeft: 'auto',
    borderWidth: 1,
    borderRadius: 1,
    padding: 2,
    paddingHorizontal: 4,
  },
  like: {
    fontSize: 12,
    color: '#999',
  },
  date: {
    fontSize: 12,
    color: '#999',
  },
  commentWrap: {
    borderTopColor: '#e1e1e1',
    paddingTop: 16,
    borderTopWidth: 1,
  },
  commentTitle: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold',
  },
  sign: {
    color: '#73d7f7',
    marginLeft: 12,
    marginTop: 6,
    fontSize: 14,
  },
  signWrap: {
    marginHorizontal: -12,
    flexWrap: 'wrap',
  },
})
const cStyle = StyleSheet.create({
  right: {
    flex: 1,
  },
  commentItem: {
    marginTop: 16,
    alignItems: 'flex-start',
  },
  info: {
    fontSize: 12,
    color: '#666',
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#e1e1e1',
    marginRight: 12,
  },
  author: {
    fontSize: 16,
    color: '#666',
    marginBottom: 2,
  },
  desc: {
    fontSize: 16,
    color: '#333',
    marginBottom: 6,
  },
  responed: {
    fontSize: 12,
    marginLeft: 8,
    color: '#333',
    marginRight: 'auto',
  },
  endTxtBox: {
    width: 140,
    position: 'relative',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginVertical: 24,
  },
  endTxtWrap: {
    width: 70,
    position: 'relative',
    marginLeft: 'auto',
    marginRight: 'auto',
    zIndex: 1,
    backgroundColor: '#fff',
  },
  endTxt: {
    color: '#999',
    fontSize: 14,
    textAlign: 'center',
  },
  endLine: {
    borderBottomWidth: 1,
    borderBottomColor: '#999',
    width: '100%',
    position: 'absolute',
    top: 8,
  },
  likeTxt: {
    fontSize: 14,
    color: '#999',
  },
  like: {
    fontFamily: 'iconfont',
    fontSize: 16,
    marginLeft: 4,
    color: '#999',
  },
  rotate: {
    marginLeft: 24,
    transform: [
      {
        rotateZ: '180deg',
      },
    ],
  },
})
